<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="60%" title="选择用户">
    <ProTable :columns="userColumns" :request-api="getApplyJobWorkersVoListApi" :init-param="initParam">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <!-- <el-button
            type="primary"
            :icon="CirclePlus"
            plain
            :disabled="!scope.isSelected"
            @click="handleBatchAddInterView(scope.selectedListIds)"
          >
            批量发送面试邀请
          </el-button> -->
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
      <template #avator="scope">
        <div class="worker-avator-box">
          <img :src="getAvatorUrl(scope.row.avator)" alt="用户头像" />
        </div>
      </template>
      <template #birthday="scope">
        {{ getAge(scope.row.birthDay) }}
      </template>
      <template #gender="scope">
        <el-tag :type="scope.row.gender === sysEnum.ONE ? 'primary' : 'danger'">
          {{ scope.row.gender === sysEnum.ONE ? "男" : "女" }}
        </el-tag>
      </template>
    </ProTable>
  </el-dialog>
  <JobInterviewDialog ref="jvDialogRef" />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { sysEnum } from "@/biz/eenum/appEnum";
import { ColumnProps } from "@/components/ProTable/interface";
import { getApplyJobWorkersVoListApi } from "@/api/modules/cpyjob/ft";
import defaultAvatar from "@/assets/images/davator.png";
import { getAge } from "@/utils";
import JobInterviewDialog from "../../../common/JobInterview.vue";
import { DialogParam } from "@/biz/interface/DialogType";

//提交按钮，避免多次提交
const dialogVisible = ref(false);

interface OptionDialogParam {}

//页面的数据
interface OptionDialogParam extends DialogParam {}

// const dialogData = reactive<OptionDialogParam>({
//   optType: OptEnum.VIEW
// });
// const initParam = reactive({ jobId: toRef(dialogData, "id") });
const initParam = reactive({ jobId: "" });

const acceptParams = (params: OptionDialogParam): void => {
  initParam.jobId = params.rowData.id;
  dialogVisible.value = true;
};

// 表格配置项
const userColumns: Partial<ColumnProps>[] = [
  { type: "selection", width: 80, fixed: "left" },
  {
    prop: "avator",
    label: "头像",
    width: 80
  },
  {
    prop: "name",
    label: "姓名"
  },
  {
    prop: "birthday",
    label: "年龄",
    width: 120
  },
  {
    prop: "gender",
    label: "性别",
    width: 120
  },
  {
    prop: "phone",
    label: "手机号"
  },
  { prop: "applyDate", label: "申请日期" }
];

const getAvatorUrl = (aurl: string) => {
  let url = defaultAvatar;
  if (aurl) {
    url = aurl;
  }
  return url;
};

// //页面事件
// const emits = defineEmits(["refresh-list"]);

//添加到组中
// const handleBatchAddInterView = async (workerIds: string[]) => {
//   // console.log("要添加的用户的ids", userIds);
//   // btnLoading.value = true;
//   // try {
//   //   let res = await addRoleUsersApi({ roleId: dialogData.roleId, userIds });
//   //   if (res.data) {
//   //     //刷新列表数据
//   //     emits("refresh-list");
//   //     dialogVisible.value = false;
//   //   }
//   // } catch (error) {
//   // } finally {
//   //   btnLoading.value = false;
//   // }
// };

// // 打开 dialog(新增、查看、编辑)
// const jvDialogRef = ref();
// const handleBatchAddInterView = (workerIds: string[]) => {
//   let params = {
//     optType: OptEnum.EDIT,
//     rowData: { workerIds, jobId: dialogData.id }
//   };
//   jvDialogRef.value.acceptParams(params);
// };

defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.worker-avator-box {
  img {
    width: 60px;
  }
}
</style>
